import React, { useId, useState } from 'react'
import clsx from 'clsx'
import { AppScreen } from './AppScreen'
import { Container } from '../Container'
import { PhoneFrame } from './PhoneFrame'

function BackgroundIllustration(props) {
  let id = useId()
  return (
    <div {...props}>
      <svg
        viewBox="0 0 1026 1026"
        fill="none"
        aria-hidden="true"
        className="absolute inset-0 h-full w-full animate-spin-slow"
      >
        <path
          d="M1025 513c0 282.77-229.23 512-512 512S1 795.77 1 513 230.23 1 513 1s512 229.23 512 512Z"
          stroke="#D4D4D4"
          strokeOpacity="0.7"
        />
        <path
          d="M513 1025C230.23 1025 1 795.77 1 513"
          stroke={`url(#${id}-gradient-1)`}
          strokeLinecap="round"
        />
        <defs>
          <linearGradient
            id={`${id}-gradient-1`}
            x1="1"
            y1="513"
            x2="1"
            y2="1025"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#06b6d4" />
            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
          </linearGradient>
        </defs>
      </svg>
      <svg
        viewBox="0 0 1026 1026"
        fill="none"
        aria-hidden="true"
        className="absolute inset-0 h-full w-full animate-spin-reverse-slower"
      >
        <path
          d="M913 513c0 220.914-179.086 400-400 400S113 733.914 113 513s179.086-400 400-400 400 179.086 400 400Z"
          stroke="#D4D4D4"
          strokeOpacity="0.7"
        />
        <path
          d="M913 513c0 220.914-179.086 400-400 400"
          stroke={`url(#${id}-gradient-2)`}
          strokeLinecap="round"
        />
        <defs>
          <linearGradient
            id={`${id}-gradient-2`}
            x1="913"
            y1="513"
            x2="913"
            y2="913"
            gradientUnits="userSpaceOnUse"
          >
            <stop stopColor="#06b6d4" />
            <stop offset="1" stopColor="#06b6d4" stopOpacity="0" />
          </linearGradient>
        </defs>
      </svg>
    </div>
  )
}



function AppDemo() {
  let [activeFeatureIndex, setActiveFeatureIndex] = useState(null)
  let activeFeature = features[activeFeatureIndex ?? features.length - 1]

  return (
    <AppScreen>
      <AppScreen.Body>
        <div className="p-4">
          <div className="flex gap-2">
            <div className="text-xs leading-6 text-gray-500">
              项目名称: 高考志愿推荐系统
            </div>
            <div className="text-sm text-gray-900">版本: v1.0</div>
            <svg viewBox="0 0 24 24" className="ml-auto h-6 w-6" fill="none">
              <path
                d="M5 12a7 7 0 1 1 14 0 7 7 0 0 1-14 0ZM12 9v6M15 12H9"
                stroke="#171717"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
          </div>
          <div className="mt-3 border-t border-gray-200 pt-5">
            <div className="text-2xl tabular-nums tracking-tight text-gray-900">
              特色: {activeFeature}
            </div>
            <div className="mt-6 flex gap-4 text-xs text-gray-500">
              {features.map((feature, idx) => (
                <div
                  key={idx}
                  onClick={() => setActiveFeatureIndex(idx)}
                  className={clsx(
                    'cursor-pointer',
                    activeFeatureIndex === idx ? 'font-semibold text-cyan-600' : 'text-gray-500'
                  )}
                >
                  {feature}
                </div>
              ))}
            </div>

            <div className="mt-3 divide-y divide-gray-100 text-sm">
              {[
                ['数据源', '高考数据库'],
                ['影响因素', '性别、经济条件、名次、兴趣爱好'],
                ['主要方法', '协同过滤算法']
              ].map(([key, value], index) => (
                <div className="flex justify-between py-1" key={index}>
                  <div className="text-gray-500">{key}</div>
                  <div className="font-medium text-gray-900">{value}</div>
                </div>
              ))}
            </div>
            <div className="mt-4 rounded-lg bg-cyan-500 px-4 py-2 text-center text-sm font-semibold text-white">
              查看更多详情
            </div>
          </div>
        </div>
      </AppScreen.Body>
    </AppScreen>
  )
}

const features = [
  '协同过滤算法',
  '用户属性为基础',
  '解决冷启动问题',
  '数据驱动',
  '综合因素影响',
  '灵活的预测方法'
]
export function Hero() {
  return (
    <div className="overflow-hidden py-20 sm:py-32 lg:pb-32 xl:pb-36">
      <Container>
        <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
          <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
            <h1 className="text-4xl font-medium tracking-tight text-gray-900">
              高考志愿推荐系统
            </h1>
            <p className="mt-6 text-lg text-gray-600">
              本系统利用用户之间的相似性，为高考生提供个性化的志愿填报建议。
            </p>
            <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
            </div>
          </div>
          <div className="relative mt-10 sm:mt-20 lg:col-span-5 lg:row-span-2 lg:mt-0 xl:col-span-6">
            <BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/3 stroke-gray-300/70 [mask-image:linear-gradient(to_bottom,white_20%,transparent_75%)] sm:top-16 sm:-translate-x-1/2 lg:-top-16 lg:ml-12 xl:-top-14 xl:ml-0" />
            <div className="-mx-4 h-[448px] px-9 [mask-image:linear-gradient(to_bottom,white_60%,transparent)] sm:mx-0 lg:absolute lg:-inset-x-10 lg:-bottom-20 lg:-top-10 lg:h-auto lg:px-0 lg:pt-10 xl:-bottom-32">
              <PhoneFrame className="mx-auto max-w-[366px]">
                <AppDemo />
              </PhoneFrame>
            </div>
          </div>
          <div className="relative -mt-4 lg:col-span-7 lg:mt-0 xl:col-span-6">
            <p className="text-center text-lg font-semibold text-gray-900 lg:text-left mb-4">
              项目特色
            </p>
            <div
              className="mx-auto mt-8 grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:mx-0"
            >
              {[
                '协同过滤算法',
                '用户属性为基础',
                '解决冷启动问题',
                '数据驱动',
                '综合因素影响',
                '灵活的预测方法',
              ].map((feature) => (
                <div key={feature} className="p-4 border rounded-lg shadow-md bg-white">
                  <p className="text-center text-sm font-medium text-gray-700 lg:text-left">
                    {feature}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Container>
    </div>
  )
}
